<template>
	<view>
		<view class="winhistory" v-if="isShow" v-for="(item,i) in winHistory" :key="item.id" @click="goOrderDetail(item.id)">
			<view style="height: 190rpx;color: #8f8f94;border-bottom: 1rpx #CCCCCC solid;">
				<view>
					<span>{{item.goods.gname}}</span><span>第</span><span>{{item.qishu}}</span><span>期</span>
				</view>
				<view style="margin-top: 20rpx;">
					<view class="images1" style="width:50px;height:50px;">
						<image :src="swichImages(item.goods.gimages)" style="width:50px;height:50px;" />
					</view>
					<view style="margin-left:60px;">
						<span>幸运用户:{{!isNull(item.userinfo) ? (item.userinfo.usersPhone.substr(0 , 3)+ "****"+item.userinfo.usersPhone.substr(7 , 11)) : ""}}</span>
						<p style="margin-top: 20rpx;">幸运号:{{item.xingyunhao}}</p>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!isShow" style="margin-top: 300rpx;">
			<view style="width: 120px;height: 120px; margin: auto;">
				<image src="../../static/center/not-records.png" style="width: 100%;height: 100%;"/>
			</view>
			<p style="text-align: center;line-height: 38px;">还没有相关的中奖记录</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gid:'',			// 商品ID
				page:1,			// 当前页数
				limit:10,		// 每页数量
				tips:"上拉加载更多数据",
				winHistory:[],  // 中奖历史集合
				isShow:true,	// 是否显示
			}
		},
		onReachBottom() {
			if(this.tips=='上拉加载更多数据'){
				this.page++;
				this.getWinHistory();
			}
		},
		onLoad(opt) {
			this.gid = opt.gid;
			this.getWinHistory();
		},
		methods: {
			//获取中奖记录
			getWinHistory(){
				if(this.isNull(this.gid)){
					console.log("个人中心进")
					this.$http.get('/xingyun/historys', {
						id:0,
						page:this.page
					}).then(res => {
						console.log(res.data)
						if(res.data.code==200){
							if(res.data.data.length>0){
								this.winHistory=this.winHistory.concat(res.data.data);
							}else{
								if(this.page==1){
									this.isShow = false;
								}
							}
						}
					})
				}else{
					console.log("商品详情进")
					this.$http.get('/xingyun/historys', {
						id:this.gid,
						page:this.page
					}).then(res => {
						console.log(res.data)
						if(res.data.code==200){
							if(res.data.data.length>0){
								this.winHistory=this.winHistory.concat(res.data.data);
							}else{
								if(this.page==1){
									this.isShow = false;
								}
							}
						}
					})
				}
			},
			//跳转订单详情页面
			goOrderDetail(id){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'orderDetail?id='+id
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//处理商品图片
			swichImages(gimages){
				return this.host+gimages;
			},
			//判断为空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	.tips-text{
		text-align: center;
	}
	.winhistory{
		background-color: white;
		padding: 20rpx 40rpx 0 40rpx;
	}
	.nav-header {
		background-color: #000000;
		color: white; 
	}  
	.nav-header h1 {
		text-align: left;
	}
	.nav-header a {
		color: white;
	}
	.box-a {
		height: 120px;
		background-color: white;
		padding: 20px 15px;
		border-bottom: 1px solid #E6E6E6;
	}
	.images1 {
		height: 40px;
		width: 40px;
		float: left;
		background-size: contain;
	}
	#zhifubao {
		background-image: url(${pageContext.request.contextPath}/weixin/img/center/zhifubao.png);
	}
	#weixin {
		background-image: url(${pageContext.request.contextPath}/weixin/img/center/weixinpay.png);
	}
	#houtai {
		background-image: url(${pageContext.request.contextPath}/weixin/img/center/dianpu.png);
	}
	.info {
		float: left;
		width: 160px;
		margin-left: 20px;
	}
	.number {
		font-size: 20px;
		color: #FF6700;
		margin-bottom: 5px;
	}
	.time {
		font-size: 14px;
	}
	.ways {
		float: left;
		margin-left: 20px;
	}
	.not-records {
		margin-top: 180px;
	}
</style>
